<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${type == 'add' ? '新增' : '修改'}产品`,
			size: '35%',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@confirm="submit"
		:saving="saving"
		@close="reset"
	>
		<el-form :model="form" :rules="rules" ref="form" label-position="top" :disabled="saving">
			<el-form-item label="产品信息">
				<el-card shadow="never">
					<el-row type="flex" style="overflow: hidden">
						<el-form-item class="mt-3" prop="picture_url">
							<cl-upload ref="uploads" v-model="form.picture_url" text="产品主图" />
						</el-form-item>
						<cl-flex1 class="pl-1">
							<el-form-item label="所属事业部" prop="biz_id" class="mt-2">
								<cl-select
									v-model="form.biz_id"
									placeholder="请选择所属事业部"
									style="width: 100%"
									@change="changeBiz"
									:disabled="type == 'edit'"
									filterable
								>
									<el-option
										v-for="item in business"
										:key="item.value"
										:label="item.biz_name"
										:value="item.biz_id"
									/>
								</cl-select>
							</el-form-item>
							<el-form-item label="产品名称" prop="sr_name">
								<el-input v-model="form.sr_name" placeholder="请输入产品名称" />
							</el-form-item>
						</cl-flex1>
					</el-row>
					<el-divider />
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="产品分类" prop="category">
								<cl-cascader
									:key="form.biz_id"
									style="width: 100%"
									placeholder="请选择产品分类"
									v-model="form.category"
									:options="cateList"
									:props="{ value: 'id', label: 'cname', children: 'childlist' }"
									filterable
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="产品售价" prop="price">
								<el-input
									v-model="form.price"
									@blur="form.price = $event.target.value"
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									placeholder="请输入产品售价"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="产品原价" prop="price_label">
								<el-input
									v-model="form.price_label"
									@blur="form.price_label = $event.target.value"
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									placeholder="请输入产品原价"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="成本价格" prop="cost_price">
								<el-input
									v-model="form.cost_price"
									@blur="form.cost_price = $event.target.value"
									oninput="value=value.replace(/[^\d^\.]/g,'')"
									placeholder="请输入成本价格"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="产品单位" prop="unit">
								<cl-select
									v-model="form.unit"
									placeholder="请选择产品单位"
									style="width: 100%"
									filterable
								>
									<el-option
										v-for="item in unitOptions"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="产品形态" prop="shape">
								<cl-select
									v-model="form.shape"
									placeholder="请选择产品形态"
									style="width: 100%"
									filterable
								>
									<el-option
										v-for="item in productShapeOpt"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="产品类型" prop="sr_type">
								<cl-select
									v-model="form.sr_type"
									placeholder="请选择产品类型"
									style="width: 100%"
									filterable
								>
									<el-option
										v-for="item in productTypeOpt"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="产品状态" prop="status">
								<cl-select
									v-model="form.status"
									placeholder="请选择产品状态"
									style="width: 100%"
									filterable
								>
									<el-option label="上架" :value="1" />
									<el-option label="下架" :value="2" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="产品标签" prop="tid">
								<cl-select
									v-model="form.tid"
									placeholder="请选择产品标签"
									style="width: 100%"
									filterable
								>
									<el-option
										v-for="item in tagList"
										:key="item.id"
										:label="item.tname"
										:value="item.id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
			<el-form-item label="产品详情" prop="description">
				<cl-wang-editor
					ref="description"
					v-model.trim="form.description"
					placeholder="请输入产品详情"
				/>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>

<script>
import { delEmptyChildren } from "@/utils";
export default {
	data() {
		return {
			type: "add",
			saving: false,
			form: {
				category: [],
				f_category: "", //所属大类
				s_category: "", //所属小类
				ss_category: "", //所属三类
				sr_id: "", //用于编辑id
				biz_id: "", //事业部id
				sr_name: "", //服务名称
				price: "", //价格
				price_label: "", //原价
				cost_price: "", //成本价
				unit: "", //单位
				sr_type: "", //类型
				shape: "", //形态
				shopping_display: 0, //商城展示
				picture_url: "", //主图
				detail_picture_url: [], //详情图
				tid: "", //标签
				status: 1, //状态(1-在售,2-停售)
				dept_id: "*",
				description: "" //详情
			},
			rules: {
				picture_url: [{ required: true, message: "请上传产品主图" }],
				sr_name: [{ required: true, message: "请输入产品名称" }],
				biz_id: [{ required: true, message: "请选择所属事业部" }],
				category: [{ required: true, message: "请选择产品分类" }],
				price: [{ required: true, message: "请输入产品售价" }],
				price_label: [{ required: true, message: "请输入产品原价" }],
				cost_price: [{ required: true, message: "请输入成本价格" }],
				unit: [{ required: true, message: "请选择产品单位" }],
				shape: [{ required: true, message: "请选择产品形态" }],
				sr_type: [{ required: true, message: "请选择产品类型" }],
				status: [{ required: true, message: "请选择产品状态" }],
				tid: [{ required: true, message: "请选择产品标签" }]
				// description: [{ required: true, message: "请填写产品详情" }]
			},
			// 产品单位
			unitOptions: [
				{ value: "1", label: "个" },
				{ value: "2", label: "件" },
				{ value: "3", label: "包" },
				{ value: "4", label: "只" },
				{ value: "5", label: "套" },
				{ value: "6", label: "对" },
				{ value: "7", label: "张" },
				{ value: "8", label: "本" },
				{ value: "9", label: "条" },
				{ value: "10", label: "次" },
				{ value: "11", label: "根" },
				{ value: "12", label: "桶" },
				{ value: "13", label: "瓶" },
				{ value: "14", label: "盒" },
				{ value: "15", label: "箱" },
				{ value: "16", label: "袋" }
			],
			// 产品类型
			productTypeOpt: [
				{ value: 1, label: "客装" },
				{ value: 2, label: "院装" },
				{ value: 9, label: "耗材" }
			],
			// 产品形态
			productShapeOpt: [
				{ value: 1, label: "液体" },
				{ value: 2, label: "粉末" },
				{ value: 3, label: "膏状" },
				{ value: 4, label: "啫喱" },
				{ value: 5, label: "膜类" },
				{ value: 6, label: "其他" }
			],
			cateList: [], //分类选项
			tagList: [] //标签选项,
		};
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(type = "add", row = {}) {
			this.$refs.drawer.create(async () => {
				this.type = type;
				if (type == "edit") {
					await this.getDetail(row);
				}
				this.getCateList();
				this.getTagList();
			});
		},
		async getDetail(row) {
			const res = await this.$service.serviceproduct.info({
				sr_id: row.sr_id,
				biz_id: row.biz_id
			});
			Object.keys(this.form).forEach(k => {
				res[k] != undefined && (this.form[k] = res[k]);
			});
			try {
				this.form.picture_url = res?.picture_url?.join();
			} catch (e) {}
			this.form.category = [res.f_category, res.s_category, res.ss_category];
			this.$refs.description && this.$refs.description.setHtml(res.description);
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { category, ...args } = this.form;
				let form = {
					...args,
					f_category: category[0],
					s_category: category[1],
					ss_category: category[2]
				};
				await this.$service.serviceproduct[this.type == "edit" ? "edit" : "add"](form).done(
					() => {
						this.saving = false;
					}
				);
				this.$emit("confirm", this.type == "add" ? true : false);
				this.$message.success(this.type == "add" ? "新增成功" : "修改成功");
				this.close();
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		changeBiz() {
			this.form.tid = 1;
			this.form.category = [];
			this.getCateList();
			this.getTagList();
		},
		//获取标签
		async getTagList() {
			const { biz_id } = this.form;
			this.tagList = [];
			if (!biz_id) return;
			const { lists } = await this.$service.tag.lists({ biz_id, type: 2, status: 1 });
			this.tagList = lists;
		},
		//获取分类
		async getCateList() {
			const { biz_id } = this.form;
			if (!biz_id) return;
			const res = await this.$service.service.getType({
				type: 2,
				biz_id
			});
			this.cateList = delEmptyChildren(res, "childlist");
		},
		reset() {
			this.$refs.description && this.$refs.description.clear();
			this.form = {
				category: [],
				f_category: "", //所属大类
				s_category: "", //所属小类
				ss_category: "", //所属三类
				sr_id: "", //用于编辑id
				biz_id: this.getCurrBiz(), //事业部id
				sr_name: "", //服务名称
				price: "", //价格
				price_label: "", //原价
				cost_price: "", //成本价
				unit: "", //单位
				sr_type: "", //类型
				shape: "", //形态
				shopping_display: 0, //商城展示
				picture_url: "", //主图
				detail_picture_url: [], //详情图
				tid: "", //标签
				status: 1, //状态(1-在售,2-停售)
				dept_id: "*",
				description: "" //详情
			};
			this.$refs.form && this.$refs.form.resetFields();
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep {
	.el-divider {
		margin: 20px 0;
		background-color: #ebeef5;
	}
}
</style>
